<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
  %>
  <base href="<%=basePath%>">
  <title>蓝牙电表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link rel="stylesheet" type="text/css" href="assets/css/admin/reset.css"/>
  <link rel="stylesheet" type="text/css" href="assets/plugins/layui/css/layui.css">
  <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_893379_qj8lfap4ylj.css"/>
</head>
<style>
    /*让徽章上下居中*/
    .layui-badge {
        top: 50%;
        transform: translateY(-50%);
    }
</style>
<body>
<div>
  <div class="clearfix margin-15">
    <div class="layui-col-md12">
      <div class="layui-card-header">
        转账记录列表
      </div>
      <div class="layui-form layuiadmin-card-header-auto padding-tb-10 layui-card"
           lay-filter="layadmin-userfront-formlist" id="searchForm">
        <div class="layui-form-item searchDiv" style="margin-bottom: 0">
          <div class="layui-inline">
            <label class="layui-form-label" style="text-align: left">电表序号</label>
            <div class="layui-input-block">
              <input type="text" placeholder="请输入电表序号" autocomplete="off"
                     class="layui-input" id="ammeterId">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label" style="text-align: left">房东手机</label>
            <div class="layui-input-block">
              <input type="text" placeholder="请输入房东手机号" autocomplete="off"
                     class="layui-input" id="mobile">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">日期范围</label>
            <div class="layui-input-inline">
              <input type="text" class="layui-input" id="time" autocomplete="off" placeholder="请选择日期范围">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block ">
              <select name="status" id="status">
                <option value="">请选择</option>
                <option value=1>转账成功</option>
                <option value=2>转账失败</option>
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-useradmin" id="search"
                    lay-filter="LAY-user-front-search">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
          </div>
        </div>
      </div>
      <div class="layui-tab-content">
        <table class="layui-tab" id="transferList" lay-filter="transferList"></table>
      </div>
    </div>
  </div>
</div>
</body>
<script src="assets/plugins/Jquery/jquery.min.js"></script>
<script src="assets/plugins/layui/layui.all.js"></script>
<script src="assets/js/common.js"></script>
<script>
  $(function () {
    layui.use(['table', 'form', 'laydate'], function () {
      var table = layui.table,
        form = layui.form;
      laydate = layui.laydate;
      laydate.render({
        elem: '#time'
        , range: true
      });
      var data = [
        {type: 'numbers', title: '序号'},
        {field: 'ammeterId', title: '电表序列号', sort: false, align: 'center'},
        {field: 'tenantPayId', title: '支付记录', sort: false, align: 'center'},
        {field: 'mobile', title: '房东手机号', sort: false, align: 'center'},
        {field: 'transferTime', title: '转账时间', sort: false, align: 'center'},
        {field: 'amount', title: '转账金额', sort: false, align: 'center'},
        {
          field: 'status',
          title: '转账状态',
          sort: false,
          align: 'center',
          templet: function (d) {
            if (d.status == 1) return '<span class="layui-badge layui-bg-green">转账成功</span>'
            else if (d.status == 2) return '<span class="layui-badge layui-bg-red">转账失败</span>'
          }
        },
        {field: 'failReason', title: '失败原因', sort: false, align: 'center'}
      ];
      table.render(
        renderTable("#transferList", 'tenantPay/transferPageAdmin', data)
      );
      $("#search").click(function () {
        var ammeterId = $("#ammeterId").val();
        var mobile = $("#mobile").val();
        var timeBegin = null;
        var timeEnd = null;
        if (!isEmpty($("#time").val())) {
          var split = $("#time").val().split(" - ");
          timeBegin = split[0].trim();
          timeEnd = split[1].trim();
        }
        var status = $("#status").val();
        table.reload('transferList', {
          page: {curr: 1},
          where: {
            ammeterId: ammeterId,
            mobile: mobile,
            timeBegin: timeBegin,
            timeEnd: timeEnd,
            status: status
          }
        })
      });
    });
  });

  $("#cancel").on("click", function () {
    layer.closeAll()
  });

  function hideFun() {
    layer.closeAll();
    userId = null
  }

  function hideWithReset(hide, reset) {
    $(hide).hide()
    $(reset)[0].reset()
  }
</script>
</html>
